<!-- subpkg_medicine/order_list/index.vue -->
<script lang="ts" setup>
  import { orderListApi } from '@/pages/api/order'
  import type { OrderRow } from '@/types/order'
  import { ref } from 'vue'

  const feedTabs = ref([
    { label: '待支付', rendered: false },
    { label: '待发货', rendered: false },
    { label: '待收货', rendered: false },
    { label: '已完成', rendered: false },
  ])
  // 加载状态
  const loading = ref(false)

  const list = ref<OrderRow[]>([])

  const getOrderList = async () => {
    loading.value = true
    const res = await orderListApi()
    console.log('---->list---->', res.rows)
    list.value = res.rows
    loading.value = false
  }
  getOrderList()
</script>

<template>
  <view class="medicine-page">
    <view class="order-status-tabs">
      <custom-tabs :data="feedTabs"></custom-tabs>
    </view>
    <scroll-view refresher-enabled refresher-background="#f6f6f6" class="uni-scroll-view" scroll-y>
      <view class="order-list">
        <view class="order-list-item" v-for="item in list" :key="item.id">
          <view class="order-header">
            <text class="number">订单编号: {{ item.orderNo }}</text>
            <text class="status">{{ item.statusValue }}</text>
          </view>
          <navigator
            hover-class="none"
            class="order-body"
            :url="`/subpkg_medicine/order_detail/order_detail?id=${item.id}`"
          >
            <view class="medicine" v-for="subItem in item.medicines">
              <image class="medicine-cover" :src="subItem.avatar" mode="aspectFill" />
              <view class="medicine-info">
                <text class="name">{{ subItem.name }}</text>
                <text class="unit symbol">{{ subItem.specs }}</text>
                <text class="price">¥{{ subItem.amount }}</text>
              </view>
              <view class="quantity">x{{ subItem.quantity }}</view>
            </view>
          </navigator>
          <view class="order-footer">
            <view class="total">共2件商品 合计：¥49.00 （运费¥0.00）</view>
            <view class="buttons">
              <button class="uni-button minor">取消订单</button>
              <button class="uni-button">继续支付</button>
            </view>
          </view>
        </view>
        <!-- 加载状态 -->
        <uni-load-more
          v-show="loading"
          status="loading"
          color="#C3C3C5"
          :icon-size="16"
          :content-text="{
            contentdown: '上拉显示更多',
            contentrefresh: '数据正在加载中',
            contentnomore: '没有更多数据了',
          }"
        />
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
